<div class="d-flex">
  <div class="side-menu">
    <nz-skeleton [nzActive]="true" [nzLoading]="loadingList">
      <ul nz-menu nzMode="inline" class="br-0">
        <li *ngFor="let item of templateList; let i = index"
            [nzSelected]="i === 0"
            nz-menu-item
            (click)="onSelectTemplate(item.id || '', i)"
            class="ps-2">
          <span>{{item.name}}</span>
        </li>
      </ul>
    </nz-skeleton>
  </div>
  <div class="temp-details px-4 py-3">
    <h4 nz-typography>详情</h4>
    <nz-skeleton [nzActive]="true" [nzLoading]="loadingDetails">

      <!--  模板预览    -->
      <div class="preview">
        <img [src]="templateDetails.image_url" alt="预览" class="img-fluid">
      </div>

      <!--  模板描述    -->
      <div class="d-flex mb-3">
        <div class="worklenz_key_sec">
          <span nz-typography>描述</span>
        </div>
        <div class="worklenz_value_sec">
          <span nz-typography>{{templateDetails.description}}</span>
        </div>
      </div>

      <!--  模板阶段    -->
      <div class="d-flex mb-4">
        <div class="worklenz_key_sec">
          <span nz-typography>阶段</span>
        </div>
        <div class="worklenz_value_sec">
          <nz-tag *ngFor="let item of templateDetails.phases" [nzColor]="item.color_code"
                  class="me-2">{{item.name}}</nz-tag>
        </div>
      </div>

      <!--  模板状态    -->
      <div class="d-flex mb-4">
        <div class="worklenz_key_sec">
          <span nz-typography>状态</span>
        </div>
        <div class="worklenz_value_sec">
          <nz-tag *ngFor="let item of templateDetails.status" [nzColor]="item.color_code"
                  class="me-2">{{item.name}}</nz-tag>
        </div>
      </div>

      <!--  模板优先级    -->
      <div class="d-flex mb-4">
        <div class="worklenz_key_sec">
          <span nz-typography>优先级</span>
        </div>
        <div class="worklenz_value_sec">
          <nz-tag *ngFor="let item of templateDetails.priorities" [nzColor]="item.color_code"
                  class="me-2">{{item.name}}</nz-tag>
        </div>
      </div>

      <!--  模板标签    -->
      <div class="d-flex mb-4">
        <div class="worklenz_key_sec">
          <span nz-typography>标签</span>
        </div>
        <div class="worklenz_value_sec">
          <nz-tag *ngFor="let item of templateDetails.labels" [nzColor]="item.color_code"
                  class="me-2">{{item.name}}</nz-tag>
        </div>
      </div>


      <!--  模板任务    -->
      <div class="worklenz_key_sec">
        <span nz-typography>任务</span>
      </div>
      <div class="mt-2">
        <ul nz-list>
          <li *ngFor="let item of templateDetails.tasks" nz-list-item>
            {{item.name}}
          </li>
        </ul>
      </div>

    </nz-skeleton>
  </div>
</div>
